<template>
    <div class="row">
        <div @click="minusCount">
            <uni-icons
                type="minus-filled"
                size="30"
                :color="buyCount <= 1 ? 'grey' : '#F9DF50'"
            ></uni-icons>
        </div>
        <text :style="{ 'font-size': '20px', width: width || '70px', 'text-align': 'center' }">{{
            buyCount
        }}</text>
        <div @click="addCount">
            <uni-icons type="plus-filled" size="30" color="#F9DF50"></uni-icons>
        </div>
    </div>
</template>

<script setup>
import request from '@/utils/request'
import { defineComponent, reactive, ref, defineProps, getCurrentInstance } from 'vue'
import { onLaunch, onShow, onHide, onLoad } from '@dcloudio/uni-app'

import { useStore } from 'vuex'
const props = defineProps(['onCountChange', 'width'])
const buyCount = ref(1)

function addCount() {
    buyCount.value++
    props.onCountChange(buyCount.value)
}
function minusCount() {
    if (buyCount.value <= 1) {
        return
    }
    buyCount.value--
    props.onCountChange(buyCount.value)
}
</script>

<style lang="scss" scoped>
.row {
    display: flex;
    flex-direction: row;
}
</style>